<template>
    <div class="page-index">
        <!-- 提示关注公众号 -->
        <!-- <div class="popupTipsBox" v-if="ishowpopupTipsBox">
            <div class="popupTips">未关注公众账号无法获得订单消息及相关服务！建议关注公众账号获得更多服务体验</div>
            <div class="popupTipsClose">
                <i class="icon close-icon closeBtnicon" style="font-size: 50rpx;" @click="closePopupTips()">&#xe618;</i>
            </div>
        </div> -->
        <Banner :banners="indexBanners" />
        <div class="tabbox">
            <div class="tabbox_item text-center" :class="[item.wd]"  @click="onClickTab(item)" v-for="(item, index) in tabs" :key="index">
                <img :src="item.bg" class="tabbox_item_img" alt="" />
                <div class="tabbox_item_title">{{item.text}}</div>
            </div>
            <!-- <div class="item text-center" :class="[item.wd]" @click="onClickTab(item)" v-for="(item, index) in tabs" :key="index">
                <div class="bg">
                    <img class="img" :src="item.bg" />
                </div>
                <div class="title text-normal font-bold" :class="[ item.textAlign ? item.textAlign : '', item.wd === 'wd-2' ? 'pad-left-12' : '' ]">{{item.text}}</div>
                <div class="label white-color" v-if="item.label">
                    {{item.label}}
                </div>
            </div> -->
        </div>
        <div class="hot-recommend" v-if="recommendList && recommendList.length">
            <wx-swiper
                class="swipper white-bg"
                autoplay="true"
                interval="3000"
                duration="1000"
                circular="true">
                <wx-swiper-item class="swiper-item" @click="onClickRecommend(item)" v-for="(item, index) in recommendList" :key="index">
                    <img class="swiper-image" :src="item.image" mode="aspectFill" />
                </wx-swiper-item>
            </wx-swiper>
        </div>
        <div class="goods-box" v-if="productList && productList.length">
            <LineTitle value="爆款套系" />
            <div class="good clearfix">
                <ProductListItem v-for="(product, index) in productList"
                    :key="index"
                    :cover="product.hot_cover ? product.hot_cover : product.cover"
                    :name="product.name"
                    :tag="product.tag"
                    :shop-name="product.shop_name"
                    :price="product.price"
                    :display-price="product.display_price"
                    :read-number="product.visitor || 0"
                    :share-number="product.share_number || 0"
                    @click="onClickProduct(product)">
                </ProductListItem>
            </div>
        </div>
        <!-- 新人领券弹窗 -->
        <NewbieCouponPop v-if="newbieCouponPopupVisible && giftCouponInfo" @clickClose="onClickClose" :info="giftCouponInfo"></NewbieCouponPop>
        <!-- 微信客服弹窗 -->
        <div v-if="wechatPopVisible" class="wechat-pop popup-container">
            <div class="inner-box">
                <div class="content-box">
                    <div class="title">提示</div>
                    <!-- 内容未定 -->
                    <div class="content">
                        点击“确认”后发送“1”
                    </div>
                </div>
                <div class="btns">
                    <button class="btns__btn" @click="hideWechatPop">取消</button>
                    <div class="line"></div>
                    <wx-button class="btns__btn" open-type="contact" @click="hideWechatPop">确认</wx-button>
                </div>
            </div>
        </div>

        <BottomTab value="home" />
    </div>
</template>

<script lang="ts">
import { api } from '@/lib/api';
import LineTitle from '@/components/common/lineTitle.vue';
import Banner from '@/components/common/banner.vue';
import TabBox from '@/components/common/tabBox.vue';
import NewbieCouponPop from '@/components/popup/newbieCouponPop.vue';
// import ShopListItem from '@/features/shop/listItem.vue';
import ProductListItem from '@/features/product/listItem.vue';
import BottomTab from '@/components/nav/bottomTab.vue';
import { ShowRdata } from '@/mixins/showRdata';

import store from '@/store';

import { Component, Mixins, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { ROUTE_NAME } from '@/lib/constant';

Component.registerHooks([
    'beforeRouteEnter',
]);

interface TabItem {
    text: string;
    label?: string;
    wd: string;
    bg: string;
    callback: any;
    textAlign?: string;
    // jump: any;
}

@Component({
    name: 'HomeIndex',
    components: {
        LineTitle,
        Banner,
        TabBox,
        NewbieCouponPop,
        ProductListItem,
        BottomTab,
        // tabs
    },
})
export default class HomeIndex extends Mixins(ShowRdata) {
    public tabs: TabItem[] = [
        // {
        //     text: '全部商品',
        //     // label: '海量任你挑',
        //     wd: 'wd-4',
        //     bg:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/12@2x.png',
        //     // bg:"https://192.168.110.199/images/12@2x.png",
        //     // bg: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/index/all_bg.png',
        //     callback: () => {
        //         api.push({
        //             name: ROUTE_NAME.SHOP_LIST,
        //         });
        //     },
        // },
        {
            text: '婚纱摄影',  //
            wd: 'wd-4',
            bg:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/1@2x.png',
            // bg:"https://192.168.110.199/images/1@2x.png",
            // bg: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/index/bridal_bg.png',
            // to: { url: '/pages/shop_category/main', query: {  } },
            callback: () => {
                api.push({
                    name: ROUTE_NAME.SHOP_CATEGORY,
                    query: {
                        type: '婚纱摄影',
                        mode: 'bridal',
                        categoryType: '分类展示'
                    },
                });
            },
        },
        {
            text: '结婚首饰',
            wd: 'wd-4',
            bg:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/3@2x.png',
            // bg:"https://192.168.110.199/images/3@2x.png",
            // bg: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/index/jewelry_bg.png',
            // to: { url: '/pages/shop_category/main', query: { type: '结婚首饰' } },
            callback: () => {
                // 新建测试
                api.push({
                    name: ROUTE_NAME.HOME_SHOP_CATEGORY,
                    query: {
                        type: '结婚首饰',
                        mode: 'bridal',
                        categoryType: '分类展示',
                        id:'37'
                    },
                });
                // api.push({
                //     name: ROUTE_NAME.SHOP_CATEGORY,
                //     query: {
                //         type: '结婚首饰',
                //         mode: 'bridal',
                //         categoryType: '分类展示'
                //     },
                // });
            }
        },
        {
            text: '家用电器',
            wd: 'wd-4',
            bg:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/2@2x.png',
            // bg:"https://192.168.110.199/images/1@2x.png",
            // bg: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/index/bridal_bg.png',
            // to: { url: '/pages/shop_category/main', query: {  } },
            callback: () => {
                api.push({
                    name: ROUTE_NAME.HOME_SHOP_CATEGORY,
                    query: {
                        type: '家用电器',
                        mode: 'bridal',
                        categoryType: '分类展示',
                        id: '38'
                    },
                });
                // api.push({
                //     name: ROUTE_NAME.SHOP_CATEGORY,
                //     query: {
                //         type: '家用电器',
                //         mode: 'bridal',
                //         categoryType: '分类展示'
                //     },
                // });
            },
        },
        {
            text: '美妆护肤',
            wd: 'wd-4',
            bg:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/4@2x.png',
            // bg:'https://192.168.110.199/images/4@2x.png',
            // bg: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/index/skincare_bg.png',
            // to: { url: '/pages/shop_category/main', query: { type: '美妆护肤' } },
            callback: () => {
                api.push({
                    name: ROUTE_NAME.HOME_SHOP_CATEGORY,
                    query: {
                        type: '美妆护肤',
                        mode: 'bridal',
                        categoryType: '分类展示',
                        id: '39'
                    },
                });
                // api.push({
                //     name: ROUTE_NAME.SHOP_CATEGORY,
                //     query: {
                //         type: '美妆护肤',
                //         mode: 'bridal',
                //         categoryType: '分类展示'
                //     },
                // });
            }
        },
        {
            text: '礼服租售',
            wd: 'wd-4',
            bg:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/5@2x.png',
            // bg: 'https://192.168.110.199/images/5@2x.png',
            // to: { url: '/pages/shop_category/main', query: { type: '礼服租售' } },
            callback: () => {

                api.push({
                    name: ROUTE_NAME.HOME_SHOP_CATEGORY,
                    query: {
                        type: '礼服租售',
                        mode: 'bridal',
                        categoryType: '分类展示',
                        id: '40'
                    },
                });
                // api.push({
                //     name: ROUTE_NAME.SHOP_CATEGORY,
                //     query: {
                //         type: '礼服租售',
                //         mode: 'bridal',
                //         categoryType: '分类展示'
                //     },
                // });
            },
        },
        // 原始关闭
        // {
        //     text: '礼包众筹',
        //     wd: 'wd-4',
        //     bg: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/index/gift_bg.png',
        //     callback: this.showWechatPop,
        // },
        {
            text: '床上用品',
            wd: 'wd-2',
            bg:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/7@2x.png',
            // bg: 'https://192.168.110.199/images/7@2x.png',
            textAlign: 'text-left',
            // callback: this.toManageCallback,
            callback: () => {
                api.push({
                    name: ROUTE_NAME.HOME_SHOP_CATEGORY,
                    query: {
                        type: '床上用品',
                        mode: 'bridal',
                        categoryType: '分类展示',
                        id: '41'
                    },
                });
                // api.push({
                //     name: ROUTE_NAME.SHOP_CATEGORY,
                //     query: {
                //         type: '床上用品',
                //         mode: 'bridal',
                //         categoryType: '分类展示'
                //     },
                // });
            },
        },
        {
            text: '家俱家私',
            wd: 'wd-2',
            bg:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/8@2x.png',
            // bg: 'https://192.168.110.199/images/8@2x.png',
            textAlign: 'text-left',
            callback: () => {
                api.push({
                    name: ROUTE_NAME.HOME_SHOP_CATEGORY,
                    query: {
                        type: '家俱家私',
                        mode: 'bridal',
                        categoryType: '分类展示',
                        id: '42'
                    },
                });
                // api.push({
                //     name: ROUTE_NAME.SHOP_CATEGORY,
                //     query: {
                //         type: '家俱家私',
                //         mode: 'bridal',
                //         categoryType: '分类展示'
                //     },
                // });
            },
        },
        {
            text: '时尚服饰',
            wd: 'wd-2',
            bg:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/9@2x.png',
            // bg:"https://192.168.110.199/images/9@2x.png",
            // bg: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/index/operate_bg.png',
            textAlign: 'text-left',
            callback: () => {
                api.push({
                    name: ROUTE_NAME.HOME_SHOP_CATEGORY,
                    query: {
                        type: '时尚服饰',
                        mode: 'bridal',
                        categoryType: '分类展示',
                        id: '43'
                    },
                });
                // api.push({
                //     name: ROUTE_NAME.SHOP_CATEGORY,
                //     query: {
                //         type: '时尚服饰',
                //         mode: 'bridal',
                //         categoryType: '分类展示'
                //     },
                // });
            },
            // callback: this.toManageCallback,
        },
        {
            text: '婚宴喜酒',
            wd: 'wd-4',
            bg:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/6@2x.png',
            // bg:"https://192.168.110.199/images/6@2x.png",
            // bg: 'https://static.playground.forzoom.tech/meta/zhuyintiancheng/wxapp/index/gift_bg.png',
            callback: () => {
                api.push({
                    name: ROUTE_NAME.HOME_SHOP_CATEGORY,
                    query: {
                        type: '婚宴喜酒',
                        mode: 'bridal',
                        categoryType: '分类展示',
                        id: '44'
                    },
                });
                // api.push({
                //     name: ROUTE_NAME.SHOP_CATEGORY,
                //     query: {
                //         type: '婚宴喜酒',
                //         mode: 'bridal',
                //         categoryType: '分类展示'
                //     },
                // });
            },
        },
        {
            text: '全部商品',
            wd: 'wd-2',
            // bg:'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/10@2x.png',
            bg: 'https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/12@2x.png',
            textAlign: 'text-left',
            callback: () => {
                api.push({
                    name: ROUTE_NAME.MALL_INDEX,
                    query: {
                        type: '更多分类',
                        mode: 'bridal',
                        categoryType: '分类展示'
                    },
                });
            },
        }
    ];

    //
    // public onIndexChange(index: string) {

    //     this.$router.push({
    //         name: ROUTE_NAME.MALL_INDEXte,
    //     });
    // }




    public newbieCouponPopupVisible: any = false;

    public newbieInfo: any = {
        total_count: 100,
        expire_days: 60,
    };

    /** 微信客服弹窗 */
    public wechatPopVisible: any = false;

    public get ishowpopupTipsBox(){
        let showTipsBox = false;
        let newData = new Date().getFullYear() + new Date().getMonth() + new Date().getDate();
        let lastData = store.state.user.ishowpopupTipsBox;
        if(newData != lastData){
            showTipsBox = true;
        }
        return showTipsBox;
    }
    public closePopupTips(){
        let newData = new Date().getFullYear() + new Date().getMonth() + new Date().getDate();
        store.state.user.ishowpopupTipsBox = newData;
    }

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    /** 赠券基础信息 */
    public get giftCouponInfo() {
        return store.state.user.giftCouponInfo;
    }
    /***
     * Tabs 列表*/
    // public get tabsGetList() {
    //     // return store.state.tab.tabgetList;
    //     // return store.state.pkg.explosiveList;
    // }
    // 获取经纬度
    public get getlocationDetail(){
        return store.state.shop.locationDetail;
    }


    /** 爆款商品列表 */
    public get explosiveListWrap() {
        return store.state.pkg.explosiveList;
    }
    public get pkgProductMap() {
        // 分类切换搜索为空是，退回首页会报字段找不到
        // return store.state.pkg.productMap;
        return store.state.pkg.productMapseries
    }
    /** banner */
    public get indexBanners() {
        return store.state.shop.indexBanners;
    }

    /** 首页分类 **/
    public get indexGategory() {
        return store.state.shop.indexGategory;
    }

    /** 推荐列表 */
    public get recommendList() {
        return store.state.shop.indexRecommendList;
    }
    public get service() {
        return store.state.utils.service;
    }

    /** 店铺列表 */
    // shopListMap: state => state.shopList,
    /** 店铺详情 */
    // shopMap: state => state.shopMap,

    /** 店铺列表 */
    // shopList() {
    //     const wrap = this.shopListMap['null_null_null'] || {
    //         list: [],
    //         loaded: false,
    //         req: false,
    //     };
    //     // tip: 首页只显示4个店铺
    //     return wrap.list.slice(0, 4).map((id) => this.shopMap[id]);
    // },

    /** 商品列表 */
    public get productList() {
        return this.explosiveListWrap.list.map((id) => this.pkgProductMap[id]);
    }

    public toManageCallback() {
        const user = this.userBasicInfo;
        const identity = user.employee_identity;
        if (identity && identity === '商家职员') {
            api.push({
                name: ROUTE_NAME.STAFF_MANAGE,
            });
            return;
        }
        if (identity && identity === '商家管理') {
            api.push({
                name: ROUTE_NAME.MERCHANT_MANAGE,
            });
            return;
        }
        if (identity && identity === '平台管理') {
            api.push({
                name: ROUTE_NAME.PLATFORM_MANAGE,
            });
            return;
        }
        wx.showToast({
            title: '请联系商家申请权限',
            icon: 'none',
        });
    }

    public onClickTab(item: any) {
        // if(item.text == '结婚首饰'){
        //     item.callback();
        // }

        if(item.text == '全部商品'){
            this.$router.push({
                name: ROUTE_NAME.MALL_INDEX,
            });
        }else{
            if (item.callback) {
                item.callback();
            }
            if (item.to) {
                api.push(Object.assign({}, item.to));
            }
        }

    }

    public onClickClose() {
        this.newbieCouponPopupVisible = false;
    }

    /**
     * 点击店铺
     */
    public onClickShop(shop: Shop.ListItem) {
        if (shop.is_photography) {
            api.push({
                name: ROUTE_NAME.SHOP_BRIDAL,
                params: {
                    shopId: shop.id + '',
                },
            });
        } else {
            api.push({
                name: ROUTE_NAME.SHOP_BRIDAL,
                params: {
                    shopId: shop.id + '',
                },
            });
        }
    }

    /**
     * 点击推荐
     */
    public onClickRecommend(item: any) {
        if (item.type === 'package') {
            // api.navigateTo({
            //     url: '/pages/pkg_detail/main',
            //     query: {
            //         pkg_id: item.link_id,
            //     },
            // });
            api.push({
                name: ROUTE_NAME.PKG_DETAIL,
                params: {
                    pkgId: item.link_id,
                },
            });
        } else if (item.type === 'good') {
            // api.navigateTo({
            //     url: '/pages/product_detail/main',
            //     query: {
            //         product_id: item.link_id,
            //     },
            // });
            api.push({
                name: ROUTE_NAME.PRODUCT_DETAIL,
                params: {
                    productId: item.link_id,
                },
            });
        }
    }

    /**
     * 点击商品
     */
    public onClickProduct(product: Pkg.ListItem) {
        // api.navigateTo({
        //     url: '/pages/pkg_detail/main',
        //     query: {
        //         pkg_id: product.id,
        //     },
        // });
        api.push({
            name: ROUTE_NAME.PKG_DETAIL,
            params: {
                pkgId: product.id + '',
            },
        });
    }

    public clickCallback(fn: any) {
        fn();
    }

    /**
     * 打开微信客服弹窗
     */
    public showWechatPop() {
        this.wechatPopVisible = true;
    }

    /**
     *  隐藏微信客服弹窗
     */
    public hideWechatPop() {
        this.wechatPopVisible = false;
    }

    public async getLocation() {
        await store.dispatch('shop/getLocation', {

        });
    }
    // 获取首页爆款系列
    public getExplosiveListFun(){
        store.dispatch('pkg/getExplosiveList', {
            offset: 0,
            count: 10,
        })
    }

    public async onReachBottom() {
        store.commit('utils/startRequest');
        await store.dispatch('pkg/getExplosiveList', {
            offset: this.explosiveListWrap.list.length,
            count: 10,
        });

        store.commit('utils/endRequest');
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        store.commit('utils/startRequest');
        await Promise.all([
            store.dispatch('utils/getPageConfig'),
            store.dispatch('shop/getIndexBanners'),
            store.dispatch('user/getGiftCoupon'),
            store.dispatch('shop/getIndexRecommendList'),
            store.dispatch('pkg/getExplosiveList', {
                offset: 0,
                count: 10,
            }),

            store.dispatch('good/getProductList', {
                offset: 0,
                count: 10,
                sort: '',
                screen: {
                    min: '',
                    max: '',
                },
                name: '',
                category:'',
                forceUpdate:true
            }),
        ]);
        store.commit('utils/endRequest');
        // if (query.type === 'coupon' && this.giftCouponInfo) {
        //     this.newbieCouponPopupVisible = true;
        //     store.dispatch('user/takeGiftCoupon');
        // }

        next();
    }
    public created() {
        if(!this.getlocationDetail.latitude || !this.getlocationDetail.longitude ){
            this.getLocation()
        }

        window.onShareAppMessage = (res) => {
            const url = this.$router.resolve({
                name: ROUTE_NAME.HOME_INDEX,
                query: {
                    referrer: this.userBasicInfo.id + '',
                },
            }).route.fullPath;

            return {
                title: '“有省有惠”结婚消...',
                imageUrl: this.service.share_image,
                // path: `/pages/index/main?referrer_id=${this.userBasicInfo.id}`,
                miniprogramPath: `/pages/main/index?type=share&targeturl=${encodeURIComponent(url)}`, // 如果需要分享原始小程序页面路由，可传递此参数
            };
        }
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-index {
    padding-bottom: @height-tabbar;
    // 提示关注公众号
    .popupTipsBox{
        position: fixed;
        top: 0rpx;
        left: 0%;
        width: 100%;
        height: 110rpx;
        background-color: #ffffff;
        color: #999999;
        font-size: 26rpx;
        display: flex;
        border-radius: 10rpx;
        padding: 10rpx 0rpx;
        box-sizing: border-box;

        z-index: 999;

        .popupTips{
            width: 90%;
            padding: 10rpx 15rpx;
            box-sizing: border-box;
        }
        .popupTipsClose{
            width: 40rpx;
            height: 110rpx;
            line-height: 110rpx;
        }
    }

    .tabbox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 5px 14px;
        // margin-top: -10px;
        .tabbox_item{
            width: 20%;
            margin-bottom: 10rpx;
        }
        .tabbox_item_img{
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin: 15rpx auto;
        }
        .tabbox_item_title{
            width: 100%;
            text-align: center;
            font-size: 24rpx;
        }
        // .item {
        //     position: relative;
        //     box-sizing: border-box;
        //     display: flex;
        //     flex-direction: column;
        //     justify-content: space-between;
        //     height: 60px;
        //     padding: 12px 6px 3px;
        //     margin-top: 8px;
        //     position: relative;
        //     background-size: cover;
        //     background-position: center;
        //     .bg {
        //         position: absolute;
        //         left: 0;
        //         right: 0;
        //         top: 0;
        //         bottom: 0;
        //         z-index: 0;
        //         .img {
        //             width: 100%;
        //             height: 100%;
        //             border-radius: 7px;
        //         }
        //     }
        //     .title {
        //         position: relative;
        //         font-size: 13px;
        //         height: 17px;
        //         line-height: 17px;
        //         z-index: 1;
        //         &.pad-left-12 {
        //             padding-left: 7px;
        //         }
        //     }
        //     .label {
        //         position: absolute;
        //         top: 60%;
        //         left: 50%;
        //         transform: translate(-50%, -50%);
        //         width: 45px;
        //         height: 12px;
        //         line-height: 12px;
        //         padding: 0 2px;
        //         margin: auto;
        //         border-radius: 9px;
        //         font-size: 8px;
        //         background-color: #FD3E80;
        //         z-index: 1;
        //     }
        //     .icon-box {
        //         display: flex;
        //         justify-content: flex-end;
        //         .icon {
        //             font-size: 22px;
        //         }
        //     }
        // }
        // .wd-4 {
        //     width: 80px;
        // }
        // .wd-2 {
        //     width: 169px;
        // }
        .bg-pink {
            background-color: #FFEDED;
            .icon {
                color: #fababd;
            }
        }
        .bg-blue {
            background-color: #E7F3FF;
            .icon {
                color: #9ec6fa;
            }
        }
    }
    .hot-recommend {
        margin-top: 10px;
        .swipper {
            width: 343px;
            height: 100px;
            margin-left: 50%;
            transform: translateX(-50%);
            border-radius: 8px;
            // box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
            overflow: hidden;
            .swiper-item {
                border-radius: 8px;
                .swiper-image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .goods-box {
        padding: 10px 18px 10px;
        .good {
            margin-right: -13px;
        }
        .inner {
            padding: 0 13px;
            border-radius: 10px;
            box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(245, 245, 245, 0.67);
            .shop-list-item:not(:last-child) {
                border-bottom: 1px solid @grey-line-color;
            }
        }
    }
    .wechat-pop {
        .inner-box {
            position: absolute;
            width: 262px;
            height: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: @white-color;
            border-radius: 5px;
            .content-box {
                box-sizing: border-box;
                width: 100%;
                padding: 5px 20px;
                text-align: center;

                .title {
                    font-size: 18px;
                    color: #101010;
                    padding-top: 20px;
                }
                .content {
                    padding: 20px 0;
                    font-size: 15px;
                    color: #a49fa5;
                }
            }
            .btns {
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 100%;
                height: 50px;
                line-height: 50px;
                border-top: 1px solid #e4dfe5;

                &__btn {
                    flex: 1;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    font-size: 16px;
                }

                .line {
                    width: 1px;
                    height: 100%;
                    background: #e4dfe5;
                }
            }
        }
    }
}

</style>
